<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

        /*对所有div元素起作用*/
        div {
            width: 350px;
            height: 30px;
            background-color: #eee;
            border: 1px solid black;
            padding: 10px;
        }

        /*对所有设置了id属性的div元素起作用*/
        div[id] {
            background-color: #aaa;
        }

        /*对id属性值中包含xx 的div元素起作用*/
        div[id *= xx] {
            background-color: #999;
        }

        /*对id属性值中以xx开头 的div元素起作用*/
        div[id ^= xx] {
            background-color: #555;
        }

        /*对id属性值中以xx结尾 的div元素起作用*/
        div[id $= xx] {
            background-color: #ccc;
        }

        /*对id属性值等于xx 的div元素起作用*/
        div[id = xx] {
            color: #ffffff;
            background-color: #111;
        }

    </style>
</head>
<body>
    <div>没有任何属性设置的div元素</div>
    <div id="a">设置了id的div元素</div>
    <div id="yyxxyy">设置了id等于 yyxxyy（包含xx）的div元素</div>
    <div id="xxyy">设置了id等于 xxyy（xx开头）的div元素</div>
    <div id="yyxx">设置了id等于 xxyy（xx结尾）的div元素</div>
    <div id="xx">设置了id等于xx的div元素</div>

</body>
</html>